const io = require('./io');
const Page = require('./pagination')

io.websocketemit('alluser', null);

var searchPage = 1;
var pageAmount = 50;
var AllUserData;

function SetupPagination() {
    new Page.Page({
        id: 'pagination',
        pageTotal: Math.ceil(AllUserData.length / pageAmount), //必填,总页数
        pageAmount: pageAmount,  //每页多少条
        dataTotal: AllUserData.length, //总共多少条数据
        curPage: 1, //初始页码,不填默认为1
        pageSize: 15, //分页个数,不填默认为5
        showPageTotalFlag: true, //是否显示数据统计,不填默认不显示
        showSkipInputFlag: false, //是否支持跳转,不填默认不显示
        getPage: function (page) {
            //获取当前页数
            searchPage = page;
            SetupList();
        }
    });
}

io.onwebsocket('alluser', (data) => {
    AllUserData = data;
    SetupPagination();
    SetupList();
});

function SetupList() {
    var itemTemplate = "<tr class={4}>\
                            <td><input value={0} type='text' readonly='readonly' style='width:100%;height:100%;margin:0px;padding:0px;' /></td>\
                            <td><input value={1} type='text' readonly='readonly' style='width:100%;height:100%;margin:0px;padding:0px;' /></td>\
                            <td><input value={2} type='text' readonly='readonly' style='width:100%;height:100%;margin:0px;padding:0px;' /></td> \
                            <td class=\"{7}\">{6}</td>\
                            <td><button user=\"{0}\" class='btn-active' key='{5}'>{3}</button></td>\
                        </tr>";
    var htmls = "";
    var startIndex = (searchPage - 1) * pageAmount;
    for (var i = startIndex; i < AllUserData.length; i++) {
        if (i >= startIndex + pageAmount)
            break;

        var item = AllUserData[i];

        var stateClass = "unactive";
        var spanTxt = "禁用中";
        var btnTxt = "启用";
        var theme = 'error';
        if (item.active) {
            stateClass = "active";
            spanTxt = "启用中";
            btnTxt = "禁止";
            theme = 'success';
        }
        htmls += itemTemplate.format(item.user, item.password, item.desc, btnTxt, theme, !item.active, spanTxt, stateClass);
    }

    document.getElementById("files").innerHTML = htmls;

    $("button.btn-active").bind("click", function () {
        var user = $(this).attr("user");
        var active = $(this).attr('key').bool();
        io.websocketemit('activeuser', { user: user, active: active });
    });
}

$("button.btnnewaccount").bind("click", function () {
    var inputAccount = $("#inputAccount").val();
    var inputProject = $("#inputProject").val();
    io.websocketemit('newuser', { user: inputAccount, password: "", desc: inputProject });
});

io.onwebsocket('newuser', (data) => {
    if (data.result == false) {
        alert(data.info);
        return;
    }

    io.websocketemit('alluser', null);
    $("#inputAccount").val("");
    $("#inputProject").val("");
});

io.onwebsocket('activeuser', (data) => {
    if (data.result == false) {
        return;
    }
    io.websocketemit('alluser', null);
});
